<!-- 头部信息 -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">留言信息管理</h1>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- 头部信息 -->
<!-- 主要工作区 -->
<section class="content">
    <div class="container-fluid">
        <div class="row" style="margin-bottom: 20px">
            <button id="btnDel" type="button" class="btn btn-secondary">删除</button>&nbsp;&nbsp;
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <!-- ./card-header -->
                    <div class="card-body">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>
                                    <input id="checkAll" type="checkbox">
                                </th>
                                <th>id</th>
                                <th>电话</th>
                                <th>留言信息</th>
                                <th>留言时间</th>
                            </tr>
                            </thead>
                            <tbody id="tbodyInfo">
                            <tr>
                                <td><input type="checkbox" value="123"></td>
                                <td>John Doe</td>
                                <td>11-7-2014</td>
                                <td>11-7-2014</td>
                                <td>11-7-2014</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
    </div>
</section>
<!-- 主要工作区 -->


<script>
    //todo 查询所有
    function getAll() {
        $.ajax({
            url: "/admin/message/getAll.action",
            dataType: "json",
            type: "get",
            beforeSend: function (XMLHttpRequest) {
                console.log("准备开始请求后端..............");
                //开启蒙版
                loadingOpen();
            },
            success: function (data, textStatus, jqXHR) {
                console.log("响应成功..............");
                if (data.result) {
                    $("#tbodyInfo").empty();

                    $(data.data).each(function (index, item) {
                        $("#tbodyInfo").append('                            <tr>\n' +
                            '                                <td><input type="checkbox"  value="' + item.id + '" ></td>\n' +
                            '                                <td>' + item.id + '</td>\n' +
                            '                                <td>' + item.tel + '</td>\n' +
                            '                                <td style="width: 60%">' + item.info + '</td>\n' +
                            '                                <td>' + item.st + '</td>\n' +
                            '                            </tr>');
                    });


                } else {
                    window.alert(data.mess);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("响应失败.............." + errorThrown);
            },
            complete: function (XMLHttpRequest, textStatus) {
                console.log("响应结束..............");
                //结束蒙版
                loadingClose();
            }
        });
    }


    $(function () {
        //todo 初始化
        getAll();

        //todo 表头的checkBox选中之后表格内部每一行的checkbox也要选中
        $("#checkAll").click(function () {
            $("#tbodyInfo :checkbox").prop("checked", $("#checkAll").prop("checked"));
        });


        //TODO 删除
        $("#btnDel").click(function () {
            if ($("#tbodyInfo :checkbox:checked").length === 0) {
                window.alert("你没有选中任何要删除的数据")
                return;
            }
            if (window.confirm("是否删除")) {



                var s1={id:1000,name:"hzj"};
                var s2=JSON.stringify(s1);

                console.log(s1);
                console.log(s2);
                console.log(typeof s1);
                console.log(typeof s2);





                var ids=[];
                //循环选中的checkBox集合
                $("#tbodyInfo :checkbox:checked").each(function (index,item) {
                    //ids.push($(item).val());
                    ids[index]=$(item).val();
                });
                console.log(ids)

                //前端直接提供把对象转换成纯字符串JSON的数据
                //JSON.stringify()把JavaScript的数据转成纯字符串JSON的数据
                var idsJSON=JSON.stringify(ids);
                console.log(idsJSON)

                $.ajax({
                    url: "/admin/message/del.action",
                    dataType: "json",
                    type: "post",
                    contentType:"application/json",
                    data:idsJSON,
                    beforeSend: function (XMLHttpRequest) {
                        console.log("准备开始请求后端..............");
                        //开启蒙版
                        loadingOpen();
                    },
                    success: function (data, textStatus, jqXHR) {
                        console.log("响应成功..............");
                        if (data.result) {
                            getAll();
                        } else {
                            window.alert(data.mess);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log("响应失败.............." + errorThrown);
                    },
                    complete: function (XMLHttpRequest, textStatus) {
                        console.log("响应结束..............");
                        //结束蒙版
                        loadingClose();
                    }
                });


            }

        });
    })


</script>